<template>
	<view>
		<view>
			<u-navbar title="维保预约" :titleSize="60" :titleWidth="500" :height="80" titleColor="#FFF" backIconColor="#FFF"
				:background="{'backgroundColor':'#212b32'}">
				<template #right>
					<view style="margin-right: 1vmax;">
						维保历史
					</view>
				</template>
				<template #right>
					<view style="color: #FFF;font-size: 0.5rem;" @click="onJump('/pages/maintenance/history')">维保历史</view>
				</template>
			</u-navbar>
		</view>
		<view>
			<u-subsection :list="tagArr" :fontSize="60" :height="150" @change="index => nodeIndex = index">
			</u-subsection>
			<!-- <view v-show="nodeIndex == 0"> -->
			<titleBox title="预约表单" titleFontSize="0.8rem">
				<u-cell-group>
					<u-cell-item :arrow="false">
						<u-field label="维保类型" :labelWidth="440" :field-style="{height:'1.1rem',fontSize:'0.6rem'}"
							v-model="serviceType"></u-field>
					</u-cell-item>
					<u-cell-item :arrow="false">
						<u-field label="城市" :labelWidth="440" :field-style="{height:'1.1rem',fontSize:'0.6rem'}"
							v-model="city"></u-field>
					</u-cell-item>
					<u-cell-item :arrow="false">
						<u-field label="维保服务站" :labelWidth="440" :field-style="{height:'1.1rem',fontSize:'0.6rem'}"
							v-model="serviceSite"></u-field>
					</u-cell-item>
					<u-cell-item :arrow="false">
						<u-field label="预约日期" :labelWidth="400" :field-style="{height:'1.1rem',fontSize:'0.6rem'}"
							v-model="appointmentDate"></u-field>
					</u-cell-item>
					<u-cell-item :arrow="false">
						<u-field label="预约时间" :labelWidth="440" :field-style="{height:'1.1rem',fontSize:'0.6rem'}"
							v-model="appointmentTime"></u-field>
					</u-cell-item>
					<u-cell-item :arrow="false">
						<u-field label="维保车辆" :labelWidth="440" :field-style="{height:'1.1rem',fontSize:'0.6rem'}"
							v-model="carObject"></u-field>
					</u-cell-item>
					<u-cell-item :arrow="false">
						<u-field label="车牌号码" :labelWidth="440" :field-style="{height:'1.1rem',fontSize:'0.6rem'}"
							v-model="carId"></u-field>
					</u-cell-item>
					<u-cell-item :arrow="false">
						<u-field label="联系人姓名" :labelWidth="440" :field-style="{height:'1.1rem',fontSize:'0.6rem'}"
							v-model="personName"></u-field>
					</u-cell-item>
					<u-cell-item :arrow="false">
						<u-field label="联系电话" :labelWidth="440" :field-style="{height:'1.1rem',fontSize:'0.6rem'}"
							v-model="personPhone"></u-field>
					</u-cell-item>
				</u-cell-group>
			</titleBox>
			<u-card v-show="nodeIndex == 1" :show-head="false" :showFoot="false">
				<template #body>
					<titleBox title="维修方案">
						<view class="item-1">
							<view> 更换零件</view>
							<view>30$</view>
						</view>
						<view class="item-1">
							<view>维修类目</view>
							<view>30$</view>
						</view>
						<view class="item-1">
							<view>单项价值</view>
							<view>30$</view>
						</view>
						<view class="item-1">
							<view>维修总价</view>
							<view>30$</view>
						</view>
						<view class="item-1">
							<view>维修周期</view>
							<view>1180天</view>
						</view>
						<view class="item-1" style="display: flex;gap: 3vmax;">
							<view style="flex: 3; height: 13vh;background-color: #f3f4f6;border-radius:1vmax;"></view>
							<view style="flex: 1;">
								<u-button type="primary" style="width: 100%;height: 100%;font-size: 1.2rem;">确认
								</u-button>
							</view>
						</view>
					</titleBox>
				</template>
			</u-card>
			<!-- </view> -->
			<!-- <view v-show="nodeIndex == 1"></view> -->
			<u-button type="primary"
				style="height: 5vmax;font-size: 1.1rem;position: fixed;bottom: 0px;width: 90vw;margin: 5vw;"
				shape="circle">预约提交</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tagArr: [{
					name: '常规保养'
				}, {
					name: '车辆维修'
				}]
				, nodeIndex: 0
				, serviceType: ''
				, city: ''
				, serviceSite: ''
				, appointmentDate: ''
				, appointmentTime: ''
				, carObject: ''
				, carId: ''
				, personName: ''
				, personPhone: ''
			}
		}
		, methods: {
			onJump(path) {
				uni.navigateTo({
					url: path
				})
			}
		},
		onLoad() {
			this.$u.vuex('token','eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImFmMDQ1OTJiLWU3OTAtNDY5MC04ZDUwLTRjNzA0MGRiODRmZSJ9.oPwuGbX65KkPqWmjacrKIqX0K027Qun_iwoK3PgVR8irb8sSp0G_N9s7krpkzvIr6Va3s9pQmyPDeD8SbcTVRg')
			// console.log(this.token);

		}
	}
</script>

<style>
	.item-1 {
		display: flex;
		justify-content: space-between;
		margin: 0.3vmax;
		margin-top: 0.6vmax;
	}
</style>
